<h2 class="kuiLocalDropdownTitle">History</h2>

<div class="history-body">
  <ul
    class="list-group history-reqs"
    tabindex="0"
    role="listbox"
    aria-activedescendant="historyReq{{ history.selectedIndex }}"
    scrollto-activedescendant
    ng-keydown="history.onKeyDown($event)"
    aria-label="History of sent requests"
  >
    <li
      role="option"
      ng-repeat="req in history.reqs"
      id="historyReq{{$index}}"
      ng-class="{ selected: history.viewingReq === req }"
      ng-click="history.selectedReq = req; history.viewingReq = req; history.selectedIndex = $index"
      ng-mouseenter="history.viewingReq = req"
      ng-mouseleave="history.viewingReq = history.selectedReq"
      ng-dblclick="history.restore(req)"
      aria-label="{{:: 'Request: ' + history.describeReq(req) }}"
      aria-selected="{{ history.selectedReq === req }}"
      class="list-group-item history-req"
    >
      {{ history.describeReq(req) }}
      <span class="history-req-icon"><i class="fa fa-chevron-right"></i></span>
    </li>
  </ul>

  <sense-history-viewer class="history-viewer" req="history.viewingReq" />
</div>

<div class="history-footer">
  <button class="kuiButton kuiButton--danger" ng-click="history.clear()">Clear</button>
  <button
    class="kuiButton kuiButton--primary"
    ng-disabled="!history.selectedReq"
    ng-click="history.restore()"
  >
    Apply
  </button>
</div>
